<template>
	<div class="addProductPage">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-menu"></i> 产污情况</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/userList' }">固体废物管理</el-breadcrumb-item>
				<el-breadcrumb-item>添加危险废物信息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-form :model="addProduct" class="addProduct-form" :rules="rules" ref="addProduct" label-position="right" label-width="180px">
			<el-form-item label="所属公司" prop="company">
				<el-input v-model="addProduct.company" placeholder="请输入所属公司"></el-input>
			</el-form-item>
			<el-form-item label="危废类别" prop="type" class="twoInputInline">
				<el-select v-model="addProduct.type" filterable clearable placeholder="请输入产品类型" >
					<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" >
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="行业" prop="industry">
				<el-input v-model="addProduct.industry" placeholder="请输入行业"></el-input>
			</el-form-item>
			<el-form-item label="危废代码" prop="code">
				<el-input v-model="addProduct.code" placeholder="请输入危废代码"></el-input>
			</el-form-item>
			<el-form-item label="危废名称" prop="name">
				<el-input v-model="addProduct.name" placeholder="请输入危废名称"></el-input>
			</el-form-item>
			<el-form-item label="俗称" prop="common_name">
				<el-input v-model="addProduct.common_name" placeholder="请输入俗称"></el-input>
			</el-form-item>
			<el-form-item label="主要有害成分" prop="part">
				<el-input v-model="addProduct.part" placeholder="生产、销售及使用过程中产生的失效、变质、不合格、淘汰、伪劣的药物和药品（不包括HW01、HW02、900-999-49类）"></el-input>
			</el-form-item>
			<el-form-item label="计量单位" prop="unit">
				<el-input v-model="addProduct.unit" placeholder="请输入计量单位"></el-input>
			</el-form-item>
			<el-form-item label="危废形态" prop="status">
				<el-input v-model="addProduct.status" placeholder="请输入危废形态"></el-input>
			</el-form-item>
			<el-form-item label="危废类型" prop="danger_type">
				<el-input v-model="addProduct.danger_type" placeholder="请输入危废类型"></el-input>
			</el-form-item>
			<el-form-item label="主要危废特性" prop="special">
				<el-input v-model="addProduct.special" placeholder="请输入危废特性"></el-input>
			</el-form-item>
			<el-form-item label="应急措施" prop="emergency ">
				<el-input v-model="addProduct.emergency " placeholder="提示：负责人迅速组织事故区人员撤离，设置警戒。组织经过培训的在岗人员穿戴好个人防护用品、进行抢险救援。"></el-input>
			</el-form-item>
			<el-form-item label="应急设备" prop="equipment">
				<el-input v-model="addProduct.equipment" placeholder="提示：干粉灭火器、砂土"></el-input>
			</el-form-item>
			<el-form-item label="委托处理公司名称" prop="entrustment ">
				<el-input v-model="addProduct.entrustment " placeholder="请输入委托处理公司"></el-input>
			</el-form-item>
			<el-form-item label="委托处理公司处理方式" prop="dealwith">
				<el-input v-model="addProduct.dealwith" placeholder="请输入处理方式"></el-input>
			</el-form-item>
			<el-form-item label="危废转运单位名称" prop="trans_company">
				<el-input v-model="addProduct.trans_company" placeholder="请输入转运单位"></el-input>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="addProduct.remark"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="addDomain">保存</el-button>
				<el-button type="primary" @click="addDomain('add')">保存并继续添加</el-button>
				<el-button @click="resetForm('addProduct')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				token: localStorage.getItem('token') ? localStorage.getItem('token') : "",
				uid: localStorage.getItem('uid') ? localStorage.getItem('uid') : "",
				dialogFormVisible: false,
				headers: new Object(),
				typeOptions: [
					{id:1,name:'HW03废药物、废品'},
					{id:2,name:'HW04农药废物'}
				],
				addProduct: {
					company: "厦门建霖工业有限公司",
					type: "HW03废药物、废品",
					industry: "非特定性行业",
					code: "900-002-03",
					name: "",
					common_name: "",
					part: "",
					unit: "吨",
					status: "",
					danger_type: "次生危废",
					special: "毒性",
					emergency: "",
					equipment: "",
					entrustment: "",
					dealwith: "",
					trans_company: "",
					remark: ""
				},
				domainsStyles:[],
				rules: {
					company: [{ required: true, trigger: 'blur' }],
					type: [{ required: true, trigger: 'blur' }],
					industry: [{ required: true, trigger: 'blur' }],
					code: [{ required: true, trigger: 'blur' }]
				},
				fileImgList: [],
				addType: {
					name: "",
					desc: ""
				},
				typeRules: {
					name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
				}
			}
		},
		created() {

		},
		computed: {
			imageUrl() {
				let value = [];
				let self=this;
				for(let i = 0; i < self.fileImgList.length; i++) {
					value.push(self.fileImgList[i].name);
				}
				return value;
			}
		},
		mounted: function() {
			this.$nextTick(function() {
				let self = this;
				self.headers = {
					'Accept': 'application/json',
					'Authorization': 'Bearer' + self.token
				};
			});
		},
		methods: {
			//重置
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		    addDomain(paths) {
		    	const self = this;
		        self.$message("添加成功");
		        var intval = window.setInterval(function() {
		        	if (paths == 'add') {
		        		self.$router.push('/add');
		        	}else{
			        	self.$router.push('/userList');
		        	}
		        	window.clearInterval(intval);
		        },1000);
		    }

		}
	}
</script>
<style lang="less">
	.addProductPage {
		.el-input__inner,
		.el-textarea__inner {
			width: 400px;
		}
		.twoInputInline .el-input__inner {
			width: 307px;
		}
		.stwoInputInline .el-input__inner {
			width: 107px;
		}
		.leftInputInline .el-input__inner {
			width: 290px;
		}
		.inlineInput {
			dispaly: inline-block;
			width: 107px;
		}
		.el-upload-list--picture-card .el-upload-list__item {
			height: 180px;
			width: 180px;
		}
		.imgItem .el-form-item__content {
			min-height: 200px;
		}
		.el-upload--picture-card {
			height: 180px;
			width: 180px;
			border: none;
		}
		.el-upload-dragger {
			height: 180px;
			width: 180px;
			
			.el-upload__text {
				position: absolute;
				top: 0px;
				width: 100%;
				height: 30px;
				line-height: 30px;
				top: 100px;
			}
		}
		/*.avatar-uploader {
			width: 200px;
			display: inline-block;
			.el-upload {
				img {
					height: 100%;
					width: 100%;
				}
			}
		}*/
		.tipMsg {
			font-size: 12px;
			color: #ccc;
			width: 200px;
			display: inline-block;
			line-height: 20px;
		}
		.edit-dialog {
			.el-date-editor--daterange.el-input {
				width: 100%!important;
			}
		}
		.el-dialog {
			width: 320px;
			.el-input__inner,
			.el-textarea__inner {
				width: 200px;
			}
		}
		.addProduct-form {
			width: 500px;
			margin: 0 auto;
		}
	}
</style>